<template>
  <el-container class="home-container">
    <!--    导航-->
    <el-header>
      <div>
        <span style="margin-left:20px;">
          <img
              src="@/assets/ilogo.png"
              width="250px;"
              style="margin-left:-10px;"
              height="100%;"
              alt
              srcset
          />
        </span>
      </div>
      <el-dropdown>
        <div class="block">
          <el-avatar :size="50" :src="this.userInfo.avatar" style="cursor: pointer;">
            <img src="@/assets/c.jpg" alt=""/>
          </el-avatar>
        </div>
        <el-dropdown-menu slot="dropdown" trigger="click">
          <el-dropdown-item>
            <span type="danger" @click="toWelcome"><span class="el-icon-house"></span> &nbsp;系统首页</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span type="danger" @click="getContact"><span class="el-icon-ship"></span> &nbsp;交流讨论</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span type="danger" @click="logout"><span class="el-icon-switch-button"></span> &nbsp;退出登入</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!--主体-->
    <el-container style="height: 500px;">
      <!--菜单-->
      <el-aside :width="isOpen===true?'64px':'210px'">
        <div class="toggle-btn" @click="isOpen = !isOpen">|||</div>
        <el-menu
            class="el-menu-vertical-demo"
            :collapse="isOpen"
            :router="true"
            :default-active="activePath"
            background-color="#272c33"
            :collapse-transition="false"
            text-color="rgba(255,255,255,0.7)"
            unique-opened
        >
          <MenuTree :menuList="this.menuList"></MenuTree>
        </el-menu>
      </el-aside>

      <!--右边主体-->
      <el-main v-loading="loading">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import MenuTree from "./MenuTree.vue"; //引进菜单模板2
import {loadTreeMenu} from "@/api";
import Qs from "qs";
import {getToken} from "@/utils/auth";
export default {
  data() {
    return {
      loading: true,
      activePath: "", //激活的路径
      isOpen: false,
      menuList: [
        {
          "id": 1,
          "parentId": 0,
          "menuName": "系统管理",
          "url": "",
          "perms": null,
          "icon": "el-icon-setting",
          "type": "0",
          "orderNum": 1,
          "createTime": "2020-03-08 01:41:30",
          "modifiedTime": "2020-05-17 00:54:50",
          "available": 1,
          "open": 1,
          "childMenus": []
        }
      ],
      userInfo: {},

    };
  },
  components: {
    MenuTree
  },
  methods: {
    /**
     *
     * 退出登入
     */
    async logout() {
      const res = await this.$confirm("此操作将退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消退出登入"
        });
      });
      if (res === "confirm") {
        window.localStorage.clear();
        await this.$router.push("/login");
      }
    },
    /**
     * 去系统首页
     */
    toWelcome() {
      this.$router.push("/welcome");
    },
    /**
     加载菜单数据
     */
    async getMenuList() {
      await loadTreeMenu({username: "admin"}).then(response => {
        if (response.code !== 200) return this.$message.error("获取菜单失败:" + response.msg);
        this.menuList = response.data.data;
      })
    },
    /**
     获取用户信息
     */
    async getUserInfo() {
      // const {data: res} = await this.$http.get("user/info");
      // if (res.code !== 200) {
      //   return this.$message.error("获取用户信息失败:" + res.msg);
      // } else {
      //   this.userInfo = res.data;
      //   //保存用户
      //   this.$store.commit("setUserInfo", res.data);
      // }
    },
    /**
     * 点击交流
     */
    getContact() {
      const w = window.open('about:blank');
      w.location.href = 'https://www.zykcoderman.xyz/';
    }

  },
  mounted() {
    this.getUserInfo();
    console.log(getToken())
  },
  created() {
    this.getMenuList();
    this.activePath = window.sessionStorage.getItem("activePath");
    // if(window.sessionStorage.getItem("activePath")==null){
    //   this.activePath='/welcome';
    // }
    setTimeout(() => {
      this.loading = false;
    }, 500);
  }
};
</script>

<style>
/* 为对应的路由跳转时设置动画效果 */

.el-header {
  background-color: #272c33;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 19px;

  padding-left: 0;
}

.el-aside {
  background-color: #272c33
}

.el-main {
  background-color: #eaedf1;
}

.home-container {
  width: 100%;
  height: 100% !important;
}

.toggle-btn {
  background-color: #2d3a4b !important;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

</style>